<template>
    <div>
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                :router='true'
                :default-active="$route.path"
                @select="handleSelect"
                background-color="#001529"
                text-color="#a6adb4"
                active-text-color="#ffd04b">
            <img src="../assets/images/logo_minist8.png" alt="" class="logo">
            <el-menu-item index="/data">数据查询</el-menu-item>
            <el-menu-item index="/task">任务中心</el-menu-item>
            <el-menu-item index="/analysis">分析中心</el-menu-item>
            <el-menu-item index="/translationCenter">翻译中心</el-menu-item>
            <el-menu-item index="/translationResults">翻译结果</el-menu-item>
        </el-menu>
        <div class="content">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>Home</el-breadcrumb-item>
                <el-breadcrumb-item>{{secondMenu}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script>
    export default {
        name: "menus",
        data() {
            return {
                secondMenu: 'Data Review'
            }
        },
        watch: {
            $route () {
                if (this.$route.path === '/data') {
                    this.secondMenu = 'Data Review'
                } else if (this.$route.path === '/task') {
                    this.secondMenu = 'Task Center'
                } else if (this.$route.path === '/analysis') {
                    this.secondMenu = 'Analyze Center'
                } else if (this.$route.path === '/translationCenter') {
                    this.secondMenu = 'Translation Center'
                } else if (this.$route.path === '/translationResults') {
                    this.secondMenu = 'Translation Results'
                }
            }
        },
        methods: {
            handleSelect() {
            }
        }
    }
</script>

<style scoped lang="scss">
    .logo {
        float: left;
        margin: 0 30px 0 40px;
    }

    .content {
        margin: 0 50px;
    }
    ::v-deep {
        .el-breadcrumb{
            margin: 16px 0;
        }
    }
</style>